<template>
  <div class="home">
      <div class="searchBar">
        <a-input-search
                :style="{ width: '320px' }"
                placeholder="快速发现答题应用"
                button-text="搜索"
                size="large"
                search-button
        />
      </div>
    <a-list
            class="list-demo-action-layout"
            :bordered="false"
            :data="dataList"
            :grid-props="{ gutter: [20, 20], sm: 24, md: 12, lg: 8, xl: 6 }"
            :pagination-props="{
                pageSize: searchParam.pageSize,
                current: searchParam.current,
                total
            }"
    >
      <template #item="{ item }">
        <AppCard :app="item"></AppCard>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
  import {reactive, ref, watchEffect,onMounted} from 'vue'
  import {listUserByPageUsingPost} from "@/api/userController";
  import message from "@arco-design/web-vue/es/message";
  import {listAppVoByPageUsingPost} from "@/api/appController";
  import AppCard from "@/components/AppCard.vue"
  import ShareModal from "@/components/ShareModal.vue"

  //用于搜索的变量
  const formSearchParams = ref<API.UserQueryRequest>({});

  // 初始化搜索条件（不应该被修改）
  const initSearchParam = ref<API.UserQueryRequest>({
    pageSize:12,
    current:1
  })
  const searchParam = ref({
    ...initSearchParam.value
  })

  //表格数据
  const dataList = ref<API.AppVO[]>([])
  //定义总条数
  const total = ref<number>(0)

  /**
   * 执行搜索
   */
  const doSearch = () => {
    searchParam.value = {
      ...initSearchParam,
      ...formSearchParams.value,
    };
  };

  //获取数据
  // const loadData = async() =>{
  //   const res = await listAppVoByPageUsingPost(searchParam.value);
  //   if(res.data.code === 0){
  //     dataList.value = res.data.data?.records || [];
  //     total.value = res.data.data?.total || 0;
  //   }else{
  //     message.error("获取数据失败" + res.data.message)
  //   }
  // }

  onMounted(async () =>{
    const res = await listAppVoByPageUsingPost(searchParam.value);
    if(res.data.code === 0){
      dataList.value = res.data.data?.records || [];
      total.value = res.data.data?.total || 0;
    }else{
      message.error("获取数据失败" + res.data.message)
    }
  })

  //改页数事件
  const onPageChange = (page:number) =>{
    searchParam.value = {
      ...searchParam.value,
      current:page
    }
  }

  /**
   * 监听 searchParams 变量，改变时触发数据的重新加载
   */
  // watchEffect(() =>{
  //   loadData()
  // })
</script>

<style scoped>
  .searchBar {
    text-align: center;
    margin-bottom: 28px;
  }

  .list-demo-action-layout .image-area {
    width: 183px;
    height: 119px;
    overflow: hidden;
    border-radius: 2px;
  }

  .list-demo-action-layout .list-demo-item {
    padding: 20px 0;
    border-bottom: 1px solid var(--color-fill-3);
  }

  .list-demo-action-layout .image-area img {
    width: 100%;
  }

  .list-demo-action-layout .arco-list-item-action .arco-icon {
    margin: 0 4px;
  }
</style>
